<template>
  <div>
    <h2>留言板</h2>

    <!-- 留言输入表单 -->
    <div>
      <label for="message">输入留言：</label>
      <textarea
        id="message"
        placeholder="请输入留言..."
        v-model.trim="lyb"
        :maxlength="100"
      ></textarea>
      <p>剩余字符：{{ zfsl - lyb.length }}</p>
      <button @click="tijiso">提交留言</button>
    </div>

    <!-- 留言列表 -->
    <ul v-if="insfos">
      <!-- 留言条目 -->
      <li v-for="item in insfos" :key="item.id">
        <MessageItem v-model="item.text" @del="del">
          <!-- 自定义留言显示的插槽 -->
          <template v-slot:default="{ model }">
            <span>{{ model }}</span>
          </template>
        </MessageItem>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, useId } from 'vue'
import MessageItem from './components/StuDemo1.vue'
const zfsl = ref(100)
const lyb = ref('')

let id = useId()

interface INs {
  id: number
  text: string
}
const insfos = ref<INs[]>([])
const tijiso = () => {
  if (lyb.value === '') {
    return
  }
  insfos.value.push({
    id: id as unknown as number,
    text: lyb.value
  })
  lyb.value = ''
}

const del = (text: string) => {
  insfos.value.splice(
    insfos.value.findIndex((item) => item.text === text),
    1
  )
}
</script>

<style lang="scss" scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
  font-size: 0.9em;
  color: #888;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}
</style>
